<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="set">
        <div class="addAttendance">
            <span id="add" @click="addcheck">
                数据导出
            </span>
            <div id="long">
            </div>
            <span id="record" @click="DataExportRecord">
                数据导出记录
            </span>
        </div>
        <div class="dataExBot">
            <div class="bot1">
                审批类型：
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="items in optionsList" :key="items.modelId" :label="items.modelName" :value="items.modelId">
                    </el-option>
                </el-select>
            </div>
            <div class="bot2">
                审批状态：
                <el-select v-model="stateValue" placeholder="请选择">
                    <el-option v-for="item in optionState" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="bot3">
                标题：
                <input type="text" class="headline" placeholder="请输入标题" v-model="approvalTitle" maxlength="20" />
            </div>
            <div class="bot4">
                发起时间：
                <el-date-picker @change="setEndDate" v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
                </el-date-picker>
                <div class="xian"></div>
                <el-date-picker @change="setEndDate1" v-model="value2" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
                </el-date-picker>
            </div>
            <div class="bot5">
                完成时间：
                <el-date-picker @change="setEndDate2" v-model="finishvalue1" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
                </el-date-picker>
                <div class="xian"></div>
                <el-date-picker @change="setEndDate3" v-model="finishvalue2" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
                </el-date-picker>
            </div>
            <div class="inquire">
                <div class="dc" @click="exportdata()">导出</div>
                <div class="cx" @click="damand()">查询</div>
            </div>
            <div class="dataTable">
                <div class="unData" v-show="unData">暂无数据</div>
                <div class="main_rightMain" v-show="hasData">
                    <div class="noticNav">
                        <span>审批标题</span>
                        <span>发起时间</span>
                        <span>完成时间</span>
                        <span>审批人</span>
                        <span>审批状态</span>
                        <span>操作</span>
                    </div>
                    <ul>
                        <li v-for="(item,index) in items" :key="index">
                            <div>
                                <div class="noticNavs">
                                    <span v-if="item.title == ''">暂无</span>
                                    <span v-else :title=item.title>{{item.title}}</span>
                                    <span>{{item.createTime | Date}}</span>
                                    <span v-if="item.finishTime == undefined">暂无</span>
                                    <span v-else>{{item.finishTime | Date}}</span>
                                    <span>{{item.approver | approverFun}}</span>
                                    <span>{{item.state | typeFun}}</span>
                                    <span>
                                        <p @click='remove(index)'>
                                            <img :title='deleteicon' src="../../../../static/img/delete.png" alt="">
                                        </p>
                                    </span>
                                </div>
                            </div>

                        </li>
                    </ul>
                    <div class="pagination">
                        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page.sync="currentPage" small
                            layout="prev, pager, next" :total="totals">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- 确认删除弹出框 -->
        <div class="removeBox ModalsBox" v-show="removeBox">
            <div class="Modals">
                <div class="modalsTop">
                    确认删除？
                </div>
                <div class="modalsBot">
                    <div class="details">
                        <div class="detailsOne">该审批单将被删除，删除后不可恢复！</div>
                    </div>
                    <div class="anNiu">
                        <div class="ensure">
                            <a href="javascript:;" @click="confirmDelete()">删除</a>
                        </div>
                        <div class="abolish" @click='abolish'>
                            <a href="javascript:;">取消</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--导出数据提示框-->
        <div class="ModalsBox" v-show="exportDataBox">
            <div class="Modals">
                <div class="modaltitle">休息一下</div>
                <div class="modalcontent">
                    <p>数据正在被导出，请勿关闭浏览器哦</p>
                    <div class="btnBox" style="margin-left:30px;">
                        <input type="button" value="确认" @click='exportDataClick'>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
// require("../../../../api/api.js");
import { mapActions } from "vuex";
export default {
  name: "set",
  data() {
    return {
      exportDataBox: false,
      deleteicon: "删除",
      unData: false,
      hasData: false,
      approvalTitle: "",
      value: "",
      stateValue: "",
      finishvalue1: "",
      finishvalue2: "",
      optionsList: [],
      optionState: [
        {
          id: "",
          name: "请选择"
        },
        {
          id: 0,
          name: "审批中"
        },
        {
          id: 1,
          name: "审批完成"
        },
        {
          id: 2,
          name: "已撤回"
        }
      ],
      value1: "",
      value2: "",
      removeBox: false,
      items: [],
      a: "",
      b: "",
      c: "",
      d: "",
      totals: 0,
      approvaId: "",
      currentPage: 1,
      pickerOptions0: {
        disabledDate(time) {
          // console.log(Date.now() - 8.64e7)
          return Date.now() < time.getTime();
        }
      }
    };
  },
  created: function() {
    let self = this;
    var accessToken = sessionStorage.getItem("accessToken");
    if (accessToken) {
      // 权限管理
      self
        .getapprovaldatalist(
          JSON.stringify({
            currentPage: self.currentPage,
            pageSize: 10,
            companyId: sessionStorage.getItem("ORGID"), //公司id
            modelId: "", //模型主键, 审批类型, 可空(全部)
            state: "",
            title: "",
            createTimeStart: "",
            createTimeEnd: "",
            finishTimeStart: "",
            finishTimeEnd: ""
          })
        )
        .then(data => {
          if (data.statusCode == "200") {
            if (data.data == undefined) {
              self.unData = true;
              self.hasData = false;
            } else {
              if (data.data.records.length == 0) {
                self.unData = true;
                self.hasData = false;
              } else {
                self.unData = false;
                self.hasData = true;
                self.items = data.data.records;
                self.totals = data.data.total * 1;
              }
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.msg
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: data.msg
          });
        });
      //  获取审批类型
      self
        .getapprovalindex({
          companyId: sessionStorage.getItem("ORGID") //企业id记得换
        })
        .then(data => {
          if (data.statusCode == "200") {
            self.optionsList = data.data;
            self.optionsList.unshift({
              modelId: "",
              modelName: "请选择"
            });
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    }
  },
  filters: {
    typeFun(val) {
      if (val == 0) {
        return "审批中";
      } else if (val == 1) {
        return "审批完成";
      } else {
        return "已撤回";
      }
    },
    Date(val) {
      if (val) {
        var now = new Date(Number(val));
        var year = now.getYear() - 100;
        var month = now.getMonth() + 1;
        month = month > 9 ? month : "0" + month;
        var date = now.getDate();
        date = date > 9 ? date : "0" + date;
        var hour = now.getHours();
        hour = hour > 9 ? hour : "0" + hour;
        var minute = now.getMinutes();
        minute = minute > 9 ? minute : "0" + minute;
        return (
          "20" + year + "-" + month + "-" + date + " " + hour + ":" + minute
        );
      } else {
        return "暂无";
      }
    },
    approverFun(val) {
      if (!val || val == "") {
        return "暂无";
      } else {
        return val;
      }
    }
  },
  watch: {},
  methods: {
    exportDataClick() {
      this.exportDataBox = false;
    },
    setEndDate(val) {
      this.a = val;
    },
    setEndDate1(val) {
      this.b = val;
    },
    setEndDate2(val) {
      this.c = val;
    },
    setEndDate3(val) {
      this.d = val;
    },
    // 导出审批数据
    // exportdata() {
    //     let self = this
    //     self.exportDataBox = true
    //     window.location.href =
    //         global.datasIp +
    //         "/api-approval/approval/data/export"
    //         + '?oid=' + sessionStorage.getItem('orgId') + '&uid=' + sessionStorage.getItem('userId')
    //         + '&mid=' + self.value + '&state=' + self.stateValue
    //         + '&title=' + self.approvalTitle + '&createTimeStart=' + self.a + '&createTimeEnd='
    //         + self.b + '&finishTimeStart=' + self.c
    //         + '&finishTimeEnd=' + self.d + '&access_token=' + sessionStorage.getItem('accessToken')
    // },
    // 表单验证
    regex() {
      let self = this;
      const number = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g;
      if (!number.test(self.approvalTitle)) {
        this.$message({
          type: "info",
          message: "标题输入有误，请重新输入！"
        });
        return;
      }
      if (self.value1 > self.value2) {
      }
    },
    // 数据查询
    damand() {
      let self = this;
      const ronsx = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g;
      if (ronsx.test(self.approvalTitle)) {
        this.$message({
          type: "info",
          message: "标题输入有误，请重新输入！"
        });
        return;
      }
      if (this.value1 !== "") {
        if (this.value2 == "") {
          this.$message({
            type: "info",
            message: "请选择结束时间"
          });
          return;
        }
      }
      if (this.value2 !== "") {
        if (this.value1 == "") {
          this.$message({
            type: "info",
            message: "请选择开始时间"
          });
          return;
        }
      }
      if (this.finishvalue1 !== "") {
        if (this.finishvalue2 == "") {
          this.$message({
            type: "info",
            message: "请选择结束时间"
          });
          return;
        }
      }
      if (this.finishvalue2 !== "") {
        if (this.finishvalue1 == "") {
          this.$message({
            type: "info",
            message: "请选择开始时间"
          });
          return;
        }
      }
      if (this.value1 > this.value2) {
        this.$message("开始时间不可以大于结束时间");
        return;
      } else if (this.value2 - this.value1 > 86400000 * 30) {
        this.$message("查询时间间隔不能大于一个月");
        return;
      }
      if (this.finishvalue1 > this.finishvalue2) {
        this.$message("开始时间不可以大于结束时间");
        return;
      } else if (this.finishvalue2 - this.finishvalue1 > 86400000 * 30) {
        this.$message("查询时间间隔不能大于一个月");
        return;
      }

      if (self.a == undefined) {
        self.a = "";
      }
      if (self.b == undefined) {
        self.b = "";
      }
      if (self.c == undefined) {
        self.c = "";
      }
      if (self.d == undefined) {
        self.d = "";
      }
      self.currentPage = Number("1");
      self
        .getapprovaldatalist(
          JSON.stringify({
            currentPage: self.currentPage,
            pageSize: 10,
            companyId: sessionStorage.getItem("ORGID"), //公司id
            modelId: self.value, //模型主键, 审批类型, 可空(全部)
            state: self.stateValue,
            title: self.approvalTitle,
            createTimeStart: self.a,
            createTimeEnd: self.b,
            finishTimeStart: self.c,
            finishTimeEnd: self.d
          })
        )
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data == undefined) {
              self.unData = true;
              self.hasData = false;
            } else {
              if (data.data.records.length == 0) {
                self.unData = true;
                self.hasData = false;
              } else {
                self.unData = false;
                self.hasData = true;
                self.items = data.data.records;
                self.totals = data.data.total * 1;
              }
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: data.msg
          });
        });
    },
    addcheck: function() {
      this.$router.push({
        path: "/home/examine/dataExport"
      });
    },
    DataExportRecord() {
      this.$router.push({
        path: "/home/examine/dataExportRecord"
      });
    },
    abolish() {
      this.removeBox = false;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      let self = this;
      self.currentPage = val;
      self
        .getapprovaldatalist(
          JSON.stringify({
            currentPage: self.currentPage,
            pageSize: 10,
            companyId: sessionStorage.getItem("ORGID"), //公司id
            modelId: self.value, //模型主键, 审批类型, 可空(全部)
            state: self.stateValue,
            title: self.approvalTitle,
            createTimeStart: self.value1,
            createTimeEnd: self.value2,
            finishTimeStart: self.finishvalue1,
            finishTimeEnd: self.finishvalue2
          })
        )
        .then(data => {
          if (data.statusCode == "200") {
            if (data.data.records.length == 0) {
              self.unData = true;
              self.hasData = false;
            } else {
              self.unData = false;
              self.hasData = true;
              self.items = data.data.records;
              self.totals = data.data.total * 1;
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: data.msg
          });
        });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    remove(index) {
      this.removeBox = true;
      this.approvaId = this.items[index].id;
    },
    // 确认删除数据列表中的单条数据
    confirmDelete() {
      let self = this;
      self
        .getapprovaldatadelete({
          approvalId: self.approvaId
        })
        .then(data => {
          if (data.statusCode == "200") {
            this.$message({
              type: "success",
              message: "删除成功！"
            });
            self.removeBox = false;
            self
              .getapprovaldatalist(
                JSON.stringify({
                  currentPage: self.currentPage,
                  pageSize: 10,
                  companyId: "6382842835502108672", //公司id
                  modelId: self.value, //模型主键, 审批类型, 可空(全部)
                  state: self.stateValue,
                  title: self.approvalTitle,
                  createTimeStart: self.value1,
                  createTimeEnd: self.value2,
                  finishTimeStart: self.finishvalue1,
                  finishTimeEnd: self.finishvalue2
                })
              )
              .then(data => {
                if (data.statusCode == "200") {
                  if (data.data !== undefined) {
                    if (data.data.records.length == 0) {
                      self.unData = true;
                      self.hasData = false;
                    } else {
                      self.unData = false;
                      self.hasData = true;
                      self.items = data.data.records;
                      self.totals = data.data.total * 1;
                    }
                  } else {
                    self.unData = true;
                    self.hasData = false;
                  }
                } else if (data.statusCode == "200003") {
                  self.$message({
                    type: "info",
                    message: data.statusMessage
                  });
                  this.$router.push({
                    path: "/login"
                  });
                } else {
                  self.$message(data.statusMessage);
                }
              })
              .catch(msg => {
                self.$message("服务器异常");
              });
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    },
    ...mapActions([
      "getapprovaldatalist",
      "getapprovaldatadelete",
      "getapprovalindex"
    ])
  }
};
</script>
<style scoped>
.set {
  width: 100%;
  height: 100%;
  margin-bottom: 70px;
}

.modalsTop {
  width: 100%;
  height: 64px;
  background-color: #ffffff;
  text-align: center;
  line-height: 64px;
  color: #ffffff;
  font-size: 16px;
  color: #303030;
}

.modalsBot {
  width: 100%;
  height: 128px;
  background-color: #ffffff;
}

.hint {
  width: 100%;
  height: 44px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 24px;
  line-height: 44px;
  color: #303030;
  font-size: 16px;
}

.details {
  width: 100%;
  height: auto;
  margin-top: 14px;
}

.detailsOne {
  padding-left: 56px;
  color: #303030;
  font-size: 14px;
}

.detailsTwo {
  padding-left: 56px;
  padding-top: 8px;
  color: #303030;
  font-size: 14px;
}

.anNiu {
  width: auto;
  height: auto;
  margin-top: 44px;
  text-align: center;
}

.ensure {
  display: inline-block;
  width: 80px;
  height: 34px;
  border-radius: 4px;
  background: #ffffff;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  line-height: 34px;
  margin-right: 23px;
  border: 1px solid #e7744a;
}

.ensure a {
  width: 100%;
  height: 100%;
  display: inline-block;
  color: #e7744a;
  font-size: 16px;
  text-decoration: none;
}

.abolish {
  display: inline-block;
  width: 80px;
  height: 34px;
  border-radius: 4px;
  background: #ffffff;
  text-align: center;
  line-height: 34px;
  margin-left: 23px;
  border: solid 1px #afafaf;
}

.abolish a {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #afafaf;
  font-size: 16px;
  text-decoration: none;
}

#record {
  cursor: pointer;
}

.cx,
.dc {
  margin-top: 20px;
  display: inline-block;
  float: right;
  width: 100px;
  height: 30px;
  border: 1px solid #e7744a;
  border-radius: 4px;
  text-align: center;
  line-height: 30px;
  color: #e7744a;
  font-size: 14px;
  cursor: pointer;
}

.dc {
  margin-right: 105px;
}

.cx {
  margin-right: 25px;
}

.xian {
  display: inline-block;
  width: 40px;
  height: 1px;
  background-color: #e7744a;
}

.bot1 {
  display: inline-block;
  margin-left: 22px;
  margin-top: 10px;
}

.el-select {
  width: 160px !important;
}

.bot2 {
  display: inline-block;
  margin-left: 15px;
}

.bot3 {
  display: inline-block;
  margin-left: 60px;
}

.bot4 {
  display: inline-block;
  margin-left: 20px;
  margin-top: 26px;
}

.bot5 {
  display: inline-block;
  margin-left: 48px;
  margin-top: 26px;
}

.headline {
  width: 220px;
  height: 34px;
  border: 1px solid #e7744a;
  padding-left: 12px;
}

.el-input {
  width: 100px;
}

.addAttendance {
  height: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  margin-left: 16px;
  margin-right: 16px;
  padding-top: 20px;
  padding-bottom: 12px;
  color: #303030;
  font-size: 14px;
}

#add {
  color: #e7744a;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}

#long {
  display: inline-block;
  width: 1px;
  height: 14px;
  padding-top: 10px;
  margin-left: -10px;
  background-color: #aeaeae;
}

.dataExBot {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

.dataTable {
  text-align: center;
  width: 100%;
  height: auto;
  margin-left: 20px;
  margin-top: 70px;
}

.addTitle {
  float: right;
  margin-top: -40px;
  margin-right: 30px;
  cursor: pointer;
  width: 70px;
  height: 30px;
  background-color: #e7744a;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  border-radius: 4px;
}

.pagination {
  float: right;
  margin-right: 20px;
  margin-top: 20px;
}

.main_rightTop p:nth-child(1) {
  color: #303030;
  font-size: 14px;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-left: 44px;
  /* width: calc(100% - 88px); */
  border-bottom: 1px solid #d9d9d9;
}

.main_rightTop {
  width: 100%;
}

.main_rightMain {
  margin-left: 14px;
  width: 90%;
}

.noticNav {
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: #f4f4f6;
  margin-top: 20px;
}

.noticNavs {
  width: 100%;
  height: 48px;
  line-height: 48px;
  /* background: #f4f4f6; */
  /* margin-top: 20px; */
}

.noticNavs span:nth-child(2) p {
  width: 16%;
  height: 40px;
  float: left;
}

.noticNavs span:nth-child(6) p img {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.noticNavs span:nth-child(1) {
  width: 17%;
  text-align: left;
  padding-left: 24px;
}

.noticNavs span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  float: left;
  width: 16%;
  text-align: center;
}

.noticNav span:nth-child(1) {
  width: 16%;
  text-align: left;
  padding-left: 24px;
}

.noticNav span {
  float: left;
  width: 16%;
  text-align: center;
}

/* .noticNav span:nth-child(1) {
        float: left;
        margin-left: 24px;
    }
    
    .noticNav span:nth-child(2) {
        float: right;
        margin-right: 134px;
    } */

ul li {
  height: 48px;
  border-bottom: 1px solid #d9d9d9;
}

ul li > p {
  height: 48px;
  line-height: 48px;
  margin-left: 24px;
  cursor: pointer;
}

.biaoti {
  float: left;
}

.unread {
  float: left;
  margin-left: 189px;
}

.grayfont {
  color: #8f8e94;
}

.borderStyle {
  cursor: pointer;
  font-size: 12px;
  color: #fcb298;
  width: 48px;
  display: inline-block;
  border: 1px solid #fcb298;
  height: 20px;
  line-height: 20px;
  border-radius: 17px;
  text-align: center;
}

.unData {
  color: #303030;
  font-size: 20px;
  padding-top: 20px;
}

/*弹窗*/

.ModalsBox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.Modals {
  background: #fff;
  height: 200px;
  width: 324px;
  margin: calc((100% - 324px) / 2) auto;
}

.modaltitle {
  height: 34px;
  line-height: 64px;
  text-align: center;
  color: #303030;
  font-size: 16px;
  background: #ffffff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.modalcontent p {
  text-align: center;
  margin-top: 52px;
  margin-bottom: 48px;
}

.btnBox {
  text-align: center;
  margin-top: -10px;
}

.btnBox input {
  width: 80px;
  height: 34px;
  line-height: 34px;
  font-size: 16px;
  color: #fff;
  background: #ffffff;
}

.btnBox input:nth-child(1) {
  margin-right: 30px;
  border: solid 1px #e97449;
  color: #e97449;
}

.btnBox input:nth-child(2) {
  margin-left: 30px;
  border: solid 1px #afafaf;
  color: #afafaf;
}
</style>